// 绑定单位
<template>
    <f7-page
        class="hntList"
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>绑定单位</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="search-box">
            <van-search
                v-model="search.enterpriseName"
                @search="searchQuery"
                @clear="reset"
                shape="round"
                background="#1990ff"
                placeholder="请输入单位名称"
            />
        </div>
        <f7-list media-list class="search-list" v-if="query.data.length > 0">
            <li
                v-for="(item, index) in query.data"
                :key="index"
                @click="detail(item)"
            >
                <div class="total-top">
                    <span class="code">{{ item.enterpriseName }}</span>
                    <span class="tag">申请绑定</span>
                </div>
                <div class="total-bottom">
                    <div>
                        <div class="name-box">
                            统一社会信用代码：<span class="value">{{
                                item.creditCode
                            }}</span>
                        </div>
                        <div class="company">
                            单位地址：<span class="value">{{
                                item.regAddress
                            }}</span>
                        </div>
                    </div>
                </div>
            </li>
        </f7-list>
        <v-empty v-else description="暂无数据"/>
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            query: '/app/ent/entBase/query',
        }
    }

    onInit() {
        this.context.isChoose=this.$f7route.query.choose
    }
    onBeforeQuery(type, conditions, params) {}
    onAfterQuery(type, isSuccess, result) {
        if(!this.context.search.enterpriseName){
            // 搜索条件为空，则不显示数据
            result.data=[]
        }
        return result
    }
    mixin() {
        return {
            data() {
                return {
                    isChoose:0,
                    search: {
                        enterpriseName: '',
                    },
                    query: {
                        data: [],
                    },
                }
            },
            methods: {
                // 详情
                detail(item) {
                    let url=window.location.href
                    let split=url.split('?')
                    if(split.length>1){
                        this.$f7router.navigate(`/business/qzjx/bindUnit/create?${split[1]}&enterpriseId=${item.enterpriseId}`)
                    }else{
                        this.$f7router.navigate(
                            `/business/qzjx/bindUnit/create?action=processStart&appCode=personCaseBind&version=1&enterpriseId=${item.enterpriseId}`
                        )
                    }
                },
                reset() {
                    this.search.enterpriseName = ''
                    this.searchQuery()
                },
            },
            mounted() {},
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

@{deep}.page-content {
    background-color: #f4f6f9;
    .myEmpty.van-empty{
        padding-top: 50px!important;
    }
}

.hntList {
    .submit-btn {
        flex: 1;
        margin: 0 10px;
        border-radius: 24px;
    }

    .search-box {
        display: flex;
        align-items: center;
        background-color: #ebedf0;
        position: fixed;
        height: 51px;
        width: 100%;
        z-index: 99;
        @{deep}.van-search{
            flex: 1;
        }
        @{deep}.searchbar {
            flex: 1;
            font-size: 16px;
            height: 35px;
            border-radius: 35px;
            overflow: hidden;
            margin-left: 16px;

            input[type='search'] {
                font-size: 16px;
                padding-left: 50px;
            }
        }

        > span {
            flex-shrink: 0;
            padding: 10px;
            width: 17px;
            height: 17px;
            background: url('../../../../assets/img/search.png') no-repeat center /
                17px;
        }
    }

    .search-list {
        margin: 65px 15px 20px;

        @{deep} ul {
            background: none;
        }

        li {
            margin: 10px 0;
            padding: 12px 15px;
            font-size: 13px;
            background: #ffffff;
            box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
            border-radius: 8px;

            .total-top,
            .total-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .total-top,
            .total-middle {
                margin-bottom: 10px;

                .code {
                    font-weight: 500;
                    color: #242424;
                    font-size: 16px;
                }

                .tag {
                    flex-shrink: 0;
                    padding: 4px 10px;
                    background: #1990ff;
                    border-color: #1990ff;
                    border-radius: 18px;
                    color: #fff;
                    text-align: center;
                }
            }

            .total-bottom {
                font-size: 13px;
                font-weight: 400;
                color: #909db6;

                .name-box {
                    margin-bottom: 5px;
                }

                .value {
                    color: #31415f;
                }
            }

            .f7-icons {
                font-size: 14px;
                margin-right: 3px;
            }
        }
    }
}
</style>
